<template>
  <div>
    <header-nav/>
    <div class="b-personal-banner">
      <div class="personal-content">
        <div class="content-center">
          <div class="avatar"></div>
          <div class="user-name">{{userName}}</div>
          <div class="switch-nav">
            <div
              class="nav-item"
              v-for="item in navList"
              :key="item.value"
              :class="{isActive: item.value===activeTab}"
              @click="activeTab=item.value"
            >{{item.label}}</div>
          </div>
        </div>
      </div>
    </div>

    <balance v-if="activeTab==='account'" />
    <k-y-c v-else-if="activeTab==='KYC'" />
    <wallet v-else-if="activeTab==='wallet'" />
    <business v-else />

    <login />
  </div>
</template>

<script>
import HeaderNav from "../../components/Header";
import Balance from "../../components/personal/balance";
import KYC from "../../components/personal/KYC"
import Wallet from "../../components/personal/wallet"
import Business from "../../components/personal/business"
import Login from "../../components/login"
export default {
  components: {
    HeaderNav,
    Balance,
    KYC,
    Wallet,
    Business,
    Login
  },
  data() {
    return {
      userName: "joycewon995@gmail.com",
      activeTab: "account",
      navList: [
        {
          label: "我的账户",
          value: "account"
        },
        {
          label: "KYC认证",
          value: "KYC"
        },
        {
          label: "我的钱包",
          value: "wallet"
        },
        {
          label: "我的交易",
          value: "business"
        }
      ]
    };
  }
};
</script>

<style lang="scss">
@import "../../assets/style/pages/personal.scss";
</style>
